<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ会员注册</title>
		<style>
			body{  
			    margin:0;  
			    padding: 0;
			    }  
			#list{  
			    width: 100%;  
			    height: 50px;
			    /*设置背景图片 不重复方法*/
			    background: #666666 url(img/qq.png) 50px -4px no-repeat;;  
			    background-size:110px  60px;  
			}  
			ul{  
			    list-style: none;  
			    margin-left: 150px;  
			    margin-top: 0px;  
			    height: 50px;  
			    line-height: 50px;  
			}  
			li{  
				/*浮动*/
				float: left;
			    margin-right: 20px;  
			}  
			a{  
			    color: white;  
			    font-size: 15px;  
			    text-decoration: none;  
			}  
			/*登录*/  
			#login{  
			    padding: 5px 10px;  
			    color: #FAD65C;  
			    border: 1px solid #FAD65C;  
			    border-radius: 50px;  
			    margin-left: 20px;
			      
			}  
			  
			/*开通超级会员*/  
			#open{  
			    padding: 5px 20px;
			    /*设置盒子的外边距*/
			    margin: -15px;  
			    background: #FAD65C;  
			    border-radius: 50px;  
			}  
			 a:hover{  
			    color: blue;  
			}  
			#login:hover{  
			    background: #fad65c;  
			    color: white;  
			}  
			#open:hover{  
			    color:blue;  
			    background: #FAD65C;  
			} 
		</style>
	</head>
	<body>		  
        <div id="list">  
            <ul>  
                <li><a href="#">功能特权</a></li>  
                <li><a href="#">游戏特权</a></li>  
                <li><a href="#">生活特权</a></li>  
                <li><a href="#">会员活动</a></li>  
                <li><a href="#">成长体系</a></li>  
                <li><a href="#">年费专区</a></li>  
                <li><a href="#">超级会员</a></li>  
                <li><a href="#" id="login">登录</a></li>  
                <li><a href="#" id="open">开通超级会员</a></li>  
            </ul>  
        </div>   
   </body>  	
</html>
